<template>
  <div class="search">
    <div class="title">订单列表</div>
    <!--  表单-->
    <el-form :inline="true" :model="searchForm" label-width="120px"
             class="demo-form-inline"
             size="mini"
             ref="search">
      <el-form-item label="受理状态" prop="accept">
        <el-select v-model="searchForm.accept" >
          <el-option label="全部" value=""></el-option>
          <el-option label="未受理" :value="0"></el-option>
          <el-option label="已受理" :value="1"></el-option>
          <el-option label="拒绝受理" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单号" prop="id">
        <el-input v-model="searchForm.id" oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}"></el-input>
      </el-form-item>
      <el-form-item label="服务类型" prop="kind">
        <el-select v-model="searchForm.kind" >
          <el-option label="全部" value=""></el-option>
          <el-option label="公司服务" :value="1"></el-option>
          <el-option label="资质证照" :value="2"></el-option>
          <el-option label="法律咨询" :value="3"></el-option>
          <el-option label="法律文书" :value="4"></el-option>
          <el-option label="知识产权" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款状态" prop="pay">
        <el-select v-model="searchForm.pay" >
          <el-option label="全部" value=""></el-option>
          <el-option label="未付款" :value="0"></el-option>
          <el-option label="已付款" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" prop="type">
        <el-select v-model="searchForm.type" >
          <el-option label="全部" value=""></el-option>
          <el-option label="未接单" :value="0"></el-option>
          <el-option label="已接单" :value="1"></el-option>
          <el-option label="拒绝接单" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
          <el-option label="确认完成" :value="4"></el-option>
          <el-option label="已取消" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item label="开始时间" prop="timeBeginRange">
          <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.timeBeginRange"></el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="timeEndRange" label-width="10">
          <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.timeEndRange"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "OrderSearchForm",
  methods:{
    onSubmit(){
      //如果开始日期晚于结束的日期，清空结束时间
      if(this.searchForm.timeEndRange!=''&&this.searchForm.timeBeginRange!=''
        &&this.searchForm.timeBeginRange.getTime()>this.searchForm.timeEndRange.getTime()){
        this.searchForm.timeEndRange = '';
      }
      this.$emit("clickSubmit",this.searchForm);
    },
    resetForm(formName){    //重置查询表单
      this.$refs[formName].resetFields();
      this.$emit("resetClick",this.searchForm);
    }
  },
  data(){
    return{
      searchForm:{
        id: '',        //订单号
        kind:'',  //服务类型  1表示公司服务，2表示证照办理；3表示法律求助；4表示法律文书；5表示知识产权
        accept:'',    //受理状态(将该状态放到切换的位置)：  0未受理  1已受理  2拒绝受理
        type:'',  //订单状态 0表示未接单（默认）；1表示已接单；2表示拒绝接单；3表示已完成；4表示确认完成；5表示已取消。
        timeBeginRange:'', //开始时间string
        timeEndRange:'',  //结束时间string
        pay:'' //是否付款
      }
    }
  }
}
</script>

<style scoped>
.search{
  border: 1px solid #999999;
  border-radius: 3px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
.line{
  text-align: center;
}
</style>
